<template>
  <div style="height: 100%;">
    <div class="buttons">
      <!-- 创建数据分类 新用户引导 step-1 -->
      <guide-step-popover :guide-step="1">
        <template #header>
          <a-tooltip>
            <template slot="title">创建分类</template>
            <a-button type="link" class="icon-button" @click="addCategory">
              <img
                alt=""
                class="icon-button-prefix"
                src="@/assets/dataset/create-category.svg"
              />
              分类
            </a-button>
          </a-tooltip>
        </template>
      </guide-step-popover>

      <!-- 点击导入数据 新用户引导 step-2 -->
      <guide-step-popover :guide-step="2">
        <template #header>
          <a-tooltip>
            <template slot="title">导入数据</template>
            <a-button
              type="link"
              class="icon-button-reverse"
              :class="{ 'button-disabled': !enableUpload }"
              @click="uploadData"
            >
              <img
                alt=""
                class="icon-button-prefix"
                src="@/assets/dataset/upload-data-active.svg"
              />
              数据
            </a-button>
          </a-tooltip>
        </template>
      </guide-step-popover>
    </div>
    <div class="dataset">
      <a-tree
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        :draggable="hoveredDatasetId >= 0 && renamedId < 0"
        :show-icon="true"
        :expanded-keys="expandedKeys"
        @drop="onDrop"
        @select="onSelect"
      >
        <div slot="category" slot-scope="item">
          <div class="icon-pointer-containter" @click="clickCategory(item.id)">
            <a-icon-font
              style="font-size: 16px;"
              :class="[
                'icon-pointer',
                {
                  'icon-pointer-open': expandedKeys.includes(
                    `category${item.id}`
                  ),
                },
              ]"
              type="iconicon-beifen-right"
            />
          </div>
          <div v-if="item.key === renamedKey && inputShow">
            <a-input
              ref="categoryInput"
              :value="newName"
              placeholder="请填写"
              auto-focus
              class="new-input"
              :max-length="40"
              @change="changeName"
              @blur="handleSubmit"
              @keyup.enter="inputEnter"
            >
              <a-icon
                v-show="newName !== ''"
                slot="suffix"
                class="input-clear"
                type="close-circle"
                @mousedown="clearNewName($event)"
              />
            </a-input>
          </div>
          <div
            v-else-if="item.key === renamedKey && !inputShow"
            style="margin-left: 40px;"
          >
            {{ newName }}
          </div>
          <div v-else class="category-title" @click="clickCategory(item.id)">
            <a-tooltip>
              <template slot="title">
                {{ item.title }}
              </template>
              <span class="category-title-itemtitle">{{ item.title }}</span>
            </a-tooltip>
            <a-dropdown
              v-if="item.key !== 'category0'"
              placement="bottomCenter"
              :trigger="['click']"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <img
                v-show="item.title !== '默认分类'"
                alt=""
                class="icon-more-options"
                src="@/assets/dataset/more-options.svg"
                @click.stop
              />
              <a-menu slot="overlay">
                <a-menu-item
                  @click="setRename($event, item.key, item.id, item.title)"
                  >重命名
                </a-menu-item>
                <a-menu-item
                  @click="setDeleteVisible($event, 'category', item.id, item)"
                  >删除
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </div>
        <div
          v-if="item.type !== 'empty'"
          slot="dataset"
          slot-scope="item"
          class="dataset-title"
          @mouseenter="() => onMouseEnter(item.id)"
          @mouseleave="onMouseLeave"
        >
          <div v-if="item.key === renamedKey && inputShow">
            <a-input
              ref="datasetInput"
              :value="newName"
              placeholder="请填写"
              auto-focus
              class="new-input"
              :max-length="132"
              @click.stop
              @change="changeName"
              @keyup.enter="inputEnter"
              @blur="handleSubmit"
            >
              <a-icon
                v-show="true"
                slot="suffix"
                class="input-clear"
                type="close-circle"
                @mousedown="clearNewName($event)"
              />
            </a-input>
          </div>
          <div v-else-if="item.key === renamedKey && !inputShow">
            <a-icon-font type="iconshujubiao" />
            <span style="margin-left: 6px;">{{ newName }}</span>
          </div>
          <div v-else :id="'dataset' + item.id">
            <transition name="table-name" appear>
              <a-icon-font type="iconshujubiao" />
            </transition>
            <a-tooltip>
              <template slot="title">
                {{ item.title }}
              </template>
              <transition name="table-name" appear>
                <span class="ellipsis-title">
                  {{ item.title }}
                  <transition v-if="item.unreadNum" appear>
                    <span class="unread">
                      {{ item.unreadNum }}
                    </span>
                  </transition>
                </span>
              </transition>
            </a-tooltip>
            <a-dropdown
              v-if="item.id > 0"
              placement="bottomCenter"
              :trigger="['click']"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <img
                v-show="item.id === hoveredDatasetId"
                alt=""
                class="icon-more-options"
                style="margin-top: 0;"
                src="@/assets/dataset/more-options.svg"
              />
              <a-menu slot="overlay">
                <a-menu-item
                  @click="setRename($event, item.key, item.id, item.title)"
                  >重命名
                </a-menu-item>
                <a-menu-item
                  @click="setDeleteVisible($event, 'dataset', item.id, item)"
                  >删除
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </div>
        <div v-else class="data-empty">
          <div>无数据表</div>
        </div>
      </a-tree>
    </div>
    <!-- 数据解析入口 -->
    <div class="footer">
      <a-button class="footer-button" @click="sqlSearch">
        <img
          alt=""
          class="icon-button-prefix"
          src="@/assets/dataset/sql-search.svg"
        />
        SQL查询
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * sider of data management view
 * show all categories and datasets of current user
 * @author Huihua Lu
 */
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import DataStore from '@/store/modules/data'
import { Modal } from 'ant-design-vue'
import UserGuideStore from '@/store/modules/user-guide'
import GuideStepPopover from '@/components/user-guide/GuideStepPopover.vue'
import DeleteDatasetContent from '@/components/data/DeleteDatasetContent.vue'
import { queryDatasetUsedInfo } from '@/api/data'

interface TreeNode {
  title: string
  key: string
  id: number
  type?: string
  scopedSlots?: any
  children?: Array<TreeNode>
  unreadNum?: number
}

@Component({
  components: {
    GuideStepPopover,
    DeleteDatasetContent,
  },
})
export default class DataSider extends Vue {
  private hoveredDatasetId: number = -1

  // 删除
  private deleteVisible: boolean = false
  private deletedId: number = -1
  private deletedType: string = ''
  private deletedName: string = ''

  // 重命名与新建目录
  private renamedKey: string = ''
  private renamedId: number = -1
  private newName: string = ''
  private originName: string = ''
  private forbidBlur: boolean = false
  public expandedKeys: any = []
  @Prop() public selectedKeys: any
  private transferUserId: any = -1

  // 新建/重命名input回车之后隐藏input，来触发blur方法
  private inputShow: boolean = true

  // hover的按钮
  private hoverButtonName: string = ''

  private graphChildrenResult: any = []

  public get datasetId() {
    return DataStore.selectedDatasetId
  }

  // 根据用户选择的数据集来请求数据
  @Watch('datasetId')
  handleChange() {
    if (this.datasetId !== -1) {
      this.onSelect([`dataset${this.datasetId}`])
      DataStore.updateUnreadList(this.datasetId)
    }
  }

  public async created(): Promise<void> {
    await DataStore.loadDatasetCategory()
    await DataStore.listGraphFile()
    await DataStore.loadUnreadList()
  }

  private mounted() {
    const { categoryId, datasetId } = DataStore

    this.clickCategory(categoryId.slice(8)) //  截取id 数字

    this.$nextTick(() => {
      this.onSelect([datasetId])
    })

    setTimeout(() => {
      if (document.querySelector('.ant-tree-treenode-selected')) {
        ;(document.querySelector(
          '.ant-tree-treenode-selected'
        ) as HTMLElement).scrollIntoView()
      } // 触发滚动到制定的元素
    }, 500)
  }

  // fix 删除选中文件后依旧记录删除文件id/filename 的问题
  // private beforeDestroy() {
  //   if (this.expandedKeys.length > 0) {
  //     const { length } = this.expandedKeys
  //     DataStore.setCategoryId(this.expandedKeys[length - 1])
  //   }

  //   if (this.selectedKeys[0] !== '') {
  //     DataStore.setDatasetId(this.selectedKeys[0])
  //   }
  // }

  public get enableUpload(): boolean {
    const result = this.treeData.some((list) => list.key !== 'category0') // category0是前端生成的“我的图文件”key
    if (!result) {
      // 不能导入时需要store改变下状态，告知 DataView 组件
      DataStore.setIsUploading(result)
    }
    return result
  }

  public get treeData(): TreeNode[] {
    const treeDataResult: Array<TreeNode> = []
    if (DataStore.datasetCategory) {
      DataStore.datasetCategory.forEach((value, index, array) => {
        const category = array[array.length - index - 1]
        const childrenResult: Array<TreeNode> = []
        category.dataset.forEach((dataset) => {
          let unreadCnt = 0
          for (let i = 0; i < DataStore.unreadList.length; i += 1) {
            if (DataStore.unreadList[i].datasetId === dataset.id) {
              unreadCnt = DataStore.unreadList[i].unreadNum
              break
            }
          }
          childrenResult.push({
            title: dataset.name,
            key: `dataset${dataset.id}`,
            id: dataset.id,
            type: dataset.type,
            scopedSlots: { title: 'dataset' },
            unreadNum: unreadCnt,
          })
        })
        treeDataResult.push({
          title: category.categoryName,
          key: `category${category.categoryId}`,
          id: category.categoryId,
          children:
            childrenResult.length !== 0
              ? childrenResult
              : [
                  {
                    title: 'empty',
                    key: `empty-${index}`,
                    type: 'empty',
                    id: -404 - index,
                    scopedSlots: { title: 'dataset' },
                  },
                ],
          scopedSlots: { title: 'category' },
        })
      })
    }
    // 获取图文件
    const graphChildrenResult: Array<TreeNode> = []
    DataStore.graphFileList.forEach((item: any, index: any) => {
      graphChildrenResult.push({
        title: item,
        key: `graph-${item}`,
        id: index + 800,
        type: 'graph',
        scopedSlots: { title: 'dataset' },
      })
    })
    treeDataResult.push({
      title: '我的图文件',
      key: 'category0',
      id: 0,
      children:
        graphChildrenResult.length !== 0
          ? graphChildrenResult
          : [
              {
                title: 'empty',
                key: 'empty',
                type: 'empty',
                id: -404,
                scopedSlots: { title: 'dataset' },
              },
            ],
      scopedSlots: { title: 'category' },
    })
    return treeDataResult
  }

  // 导入数据 按钮状态
  public get uploadDisabled() {
    let result = true
    DataStore.datasetCategory.forEach((item) => {
      if (item.categoryId > 0) {
        result = false
      }
    })
    return result
  }

  public get datasetCategory() {
    return DataStore.datasetCategory
  }

  /* 单个数据集操作 */
  public onMouseEnter(datasetId: number) {
    this.hoveredDatasetId = datasetId
  }

  public onMouseLeave() {
    this.hoveredDatasetId = -1
  }

  // 删除分类或数据集
  public async setDeleteVisible(
    event: any,
    type: string,
    id: number,
    item: any
  ) {
    event.domEvent.stopPropagation()
    this.deletedType = item.type && item.type === 'graph' ? item.type : type
    this.deletedName = item.type && item.type === 'graph' ? item.title : ''
    this.deletedId = id
    let dataset: any
    if (this.deletedType === 'dataset') {
      const response = await queryDatasetUsedInfo({
        data: { datasetId: this.deletedId },
      })
      dataset = response.data.result
      if (dataset.length !== 0) {
        this.transferUserId = dataset[0].userId
      }
    }
    Modal.confirm({
      title:
        this.deletedType === 'category'
          ? '确定要删除该分类吗？'
          : '确定要删除该数据表吗？',
      content:
        this.deletedType === 'category'
          ? '删除分类将会删除该分类下的所有数据，请问您确定要执行该操作吗'
          : () =>
              this.$createElement('delete-dataset-content', {
                props: {
                  dataset,
                  setTransferUserId: (value: any) => {
                    this.transferUserId = value
                  },
                },
              }),
      centered: true,
      okText: '确定',
      cancelText: '取消',
      onOk: this.deleteDataset,
      onCancel: this.cancelDelete,
    })
  }

  public cancelDelete() {
    this.deletedType = ''
    this.deleteVisible = false
    this.deletedId = -1
  }

  public async deleteDataset(): Promise<void> {
    let refresh = false
    if (this.deletedType === 'category') {
      DataStore.datasetCategory.forEach((category) => {
        if (category.categoryId === this.deletedId) {
          category.dataset.forEach((dataset) => {
            if (dataset.id === DataStore.selectedDatasetId) {
              refresh = true
            }
          })
        }
      })
      await DataStore.deleteCategory(this.deletedId)
      if (refresh) {
        DataStore.setSelectedDatasetId(-1)
        DataStore.setDatasetId('')
      }
    } else if (this.deletedType === 'graph') {
      const response = await DataStore.deleteGraphFile({
        fileName: this.deletedName,
      })
      DataStore.setSelectedGraphFileName('')
      DataStore.setDatasetId('')
      if (
        response.data.code === 100 &&
        this.deletedId === DataStore.selectedDatasetId
      ) {
        this.deleteVisible = false
        await DataStore.listGraphFile()
      }
    } else {
      const response = await DataStore.deleteDataset({
        id: this.deletedId,
        transferUserId: this.transferUserId,
      })
      if (
        response.data.code === 100 &&
        this.deletedId === DataStore.selectedDatasetId
      ) {
        this.deleteVisible = false
        DataStore.setSelectedDatasetId(-1)
      }
    }
    DataStore.deleteFromPreSelectedDataset(this.deletedId)
    this.deleteVisible = false
    this.deletedId = -1
    this.deletedType = ''
  }

  /* 重命名 新建目录 */
  public setRename(event: any, key: string, id: number, originName: string) {
    event.domEvent.stopPropagation()
    this.inputShow = true
    this.renamedKey = key
    this.renamedId = id
    this.newName = originName
    this.originName = originName
  }

  public changeName(event: any) {
    this.newName = event.target.value
  }

  public async handleSubmit() {
    if (this.renamedId < -1 && this.newName === '') {
      DataStore.cancelAddCategory()
    } else if (this.newName === '' && this.renamedKey.includes('category')) {
      this.$message.error('未输入分类名称')
      this.cancelInput()
      return
    } else if (
      (this.newName === '' && this.renamedKey.includes('dataset')) ||
      (this.newName === '' && this.renamedKey.includes('graph'))
    ) {
      this.$message.error('未输入数据集名称')
      this.cancelInput()
      return
    }
    await this.submitNewName()
    this.inputShow = false
  }

  // 回车提交newName
  public inputEnter($event: any) {
    $event.target.blur()
    this.newName = this.newName.trim()
    this.inputShow = false
  }

  public async submitNewName() {
    if (this.renamedId < 0 || this.renamedKey.includes('category')) {
      // 判断分类名是否已存在
      for (let i = 0; i < this.datasetCategory.length; i += 1) {
        if (
          this.datasetCategory[i].categoryName === this.newName &&
          this.datasetCategory[i].categoryId !== this.renamedId
        ) {
          this.$message.error('分类名已存在！')
          DataStore.loadDatasetCategory()
          this.renamedKey = ''
          this.renamedId = -1
          this.newName = ''
          return
        }
      }
    }
    if (this.newName === '我的图文件') {
      this.$message.error('不允许使用该分类名')
      DataStore.loadDatasetCategory()
      this.renamedKey = ''
      this.renamedId = -1
      this.newName = ''
      return
    }

    if (this.renamedId < 0) {
      // 创建新的 database category
      if (this.newName) {
        const result = await DataStore.submitNewDatasetCategory(this.newName)
        if (result) {
          this.$message.success('分类创建成功！')
          // 刷新列表
          await DataStore.updateCurrentUserDatasetCategory()
          // 创建成功后关闭这一步的提醒
          UserGuideStore.toSpecifiedGuideStep(2)
        }
      } else {
        // 退出引导 进行中
        UserGuideStore.setCurrentGuideStepInProgress(false)
        this.$message.warn('请确认分类名!')
      }
    } else if (this.renamedKey.includes('category')) {
      // 重命名 database category
      await DataStore.renameDatasetCategory({
        id: this.renamedId,
        name: this.newName,
      }).then((result) => {
        if (result) {
          this.$message.success('分类重命名成功！')
        }
      })
    } else if (this.newName.includes(' ')) {
      this.$message.error('数据表名不允许含有空格！')
    } else if (this.renamedKey.includes('graph')) {
      await DataStore.updateGraphDataset({
        fileName: this.originName,
        update: this.newName,
      }).then((response) => {
        if (response.data.code === 100) {
          this.$message.success('数据表重命名成功！')
        }
      })
    } else {
      // 重命名 database
      let id: number = -1
      for (
        let categoryIndex = 0;
        categoryIndex < this.treeData.length;
        categoryIndex += 1
      ) {
        const category = this.treeData[categoryIndex]
        if (category.children) {
          const index = category.children
            .map((d) => d.id)
            .indexOf(this.renamedId)
          if (index >= 0) {
            id = category.id
            break
          }
        }
      }
      if (id >= 0) {
        await DataStore.updateDataset({
          id: this.renamedId,
          name: this.newName,
          description: '',
          categoryId: id,
        }).then((response) => {
          if (response.data.code === 100) {
            this.$message.success('数据库重命名成功！')
          }
        })
      }
    }
    this.renamedKey = ''
    this.renamedId = -1
    this.newName = ''
  }

  public addCategory() {
    // 进入引导 进行中
    UserGuideStore.setCurrentGuideStepInProgress(true)
    this.inputShow = true
    this.renamedId = -2
    DataStore.addNewDatasetCategory()
    this.renamedKey = 'category-1'
  }

  /* 取消重命名 取消新建目录 */
  public cancelInput() {
    if (this.forbidBlur) {
      this.forbidBlur = false
      return
    }
    if (this.renamedId < -1) {
      DataStore.cancelAddCategory()
    }
    this.renamedKey = ''
    this.renamedId = -1
    this.newName = ''
  }

  /* 更改数据集目录 */
  public async onDrop(info: any) {
    const dragNodePos: Array<string> = info.dragNode.pos.split('-')
    const dragCategoryIndex: number = Number.parseInt(dragNodePos[1], 10)
    const dragDatasetIndex: number = Number.parseInt(dragNodePos[2], 10)

    const dropNodePos: Array<string> = info.node.pos.split('-')
    const dropCategoryIndex: number = Number.parseInt(dropNodePos[1], 10)

    // public get treeData 前端指定 图文件分组 id : 0, key: 'category0',
    if (
      this.treeData[dragCategoryIndex].id === 0 ||
      this.treeData[dropCategoryIndex].id === 0
    ) {
      this.$message.warning('图文件不能与其他数据混合存放!', 5)
      return
    }

    if (dropCategoryIndex === dragCategoryIndex) {
      return
    }

    const dragChildren = this.treeData[dragCategoryIndex].children
    if (!dragChildren) {
      return
    }
    const draggedDatasetId = dragChildren[dragDatasetIndex].id
    const draggedDatasetName = dragChildren[dragDatasetIndex].title
    const droppedCategoryId = this.treeData[dropCategoryIndex].id

    await DataStore.updateDataset({
      description: '',
      id: draggedDatasetId,
      name: draggedDatasetName,
      categoryId: droppedCategoryId,
    })
  }

  public setHover(value: any) {
    // 设置hoverButtonName的值
    this.hoverButtonName = value
  }

  // 点击分类 展开/收起
  public clickCategory(id: string) {
    const categoryId: string = `category${id}`
    const index = this.expandedKeys.findIndex((v: any) => v === categoryId)
    if (index < 0) {
      this.expandedKeys.push(categoryId)
    } else {
      this.expandedKeys.splice(index, 1)
    }
  }

  /* 查看数据集 */
  public onSelect(selectedKey: any) {
    // 判断有有效数据
    if (!(selectedKey && selectedKey[0])) {
      return
    }
    // 不处理空白节点、树节点、重复点击
    if (
      selectedKey[0].includes('empty-') ||
      selectedKey[0].includes('category') ||
      selectedKey.length === 0
    ) {
      return
    }
    if (this.inputShow && this.renamedKey === selectedKey[0]) {
      return
    }
    if (
      this.$route.path !== '/management/data' &&
      this.$route.path !== '/management/data/status'
    ) {
      this.$router.push('/management/data')
    }
    // 记录查看数据集的历史记录
    const [selectedDatasetKey] = selectedKey
    if (!selectedDatasetKey) {
      return
    }
    if (selectedDatasetKey.startsWith('graph-')) {
      // 图文件特殊处理，用文件名读取
      DataStore.setSelectedGraphFileName(
        selectedDatasetKey.replace('graph-', '')
      )
      DataStore.setSelectedDatasetId(-1)
    } else {
      // 普通数据集
      const selectedDatasetId = Number.parseInt(selectedDatasetKey.slice(7), 10)
      DataStore.setSelectedDatasetId(selectedDatasetId)
      DataStore.setSelectedGraphFileName('')
    }
    DataStore.pushPreSelectedDataset({
      id: DataStore.selectedDatasetId,
      name: this.selectedKeys[0],
      type: '',
    })
    this.$emit('set-selected-keys', selectedKey)
    DataStore.setIsUploading(false)
  }

  /* 导入数据 */
  public uploadData() {
    if (!this.enableUpload) {
      this.$message.info('请先创建数据分类')
      return
    }
    if (!DataStore.isUploading) {
      DataStore.setIsUploading(true)
      DataStore.pushPreSelectedDataset({
        id: DataStore.selectedDatasetId,
        name: this.selectedKeys[0],
        type: '',
      })
      DataStore.setSelectedDatasetId(-1)
    }
    this.$router.push('/management/data/import')
    UserGuideStore.toSpecifiedGuideStep(3)
  }

  // 清空输入框
  public clearNewName(event: any) {
    event.preventDefault()
    this.newName = ''
  }

  // 进入sql查询
  public sqlSearch() {
    if (!DataStore.isSqlSearch) {
      DataStore.setIsSqlSearch(true)
      this.$router.push('/management/data/sqlSearch')
      DataStore.setSelectedDatasetId(-1)
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.buttons {
  display: inline-flex;
  flex-direction: row;
  height: 24px;
  justify-content: space-between;
  margin-left: 31px;
  margin-top: 10px;
  width: 160px;

  .icon-button {
    align-items: center;
    border: 1.5px solid #6772ff;
    border-radius: 15px;
    color: #6772ff;
    display: flex;
    font-size: 13px;
    height: 24px;
    justify-content: center;
    width: 70px;

    // 前面的icon
    .icon-button-prefix {
      margin-right: 4px;
      width: 14px;
    }
  }

  .icon-button-reverse {
    align-items: center;
    background-color: #6772ff;
    border: 1.5px solid #6772ff;
    border-radius: 15px;
    color: #fff;
    display: flex;
    font-size: 13px;
    height: 24px;
    justify-content: center;
    width: 70px;

    // 前面的icon
    .icon-button-prefix {
      margin-right: 4px;
      width: 14px;
    }
  }
}

.unread {
  background: #eceeff;
  border: #dfe1ff 1px solid;
  border-radius: 9px;
  color: #6973ff;
  font-size: 11px;
  height: 18px;
  margin-left: 10px;
  padding: 1px 8px;
  text-align: center;
  width: 28px;
}

// 左侧栏宽度
/deep/ aside .ant-layout-sider {
  max-width: 220px !important;
}

// 左侧栏empty状态
.button-disabled {
  color: #222432;
  opacity: 0.3;
  padding-left: 24px;

  // 前面的icon
  .icon-button-prefix {
    margin-right: 4px;
    width: 14px;
  }
}

.div-empty {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin-top: -36px;
  text-align: center;
}

.dataset {
  bottom: 0;
  height: calc(100% - 120px);
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 40px;
  width: 220px;

  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

// 左侧栏
/deep/ .ant-tree li .ant-tree-node-content-wrapper {
  border: 0;
  height: 44px;
  line-height: 44px;
  width: 210px;
}

.category-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 40px;
  padding-right: 5px;
  width: 200px;

  .category-title-itemtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 119px;
  }
}

// 箭头样式
.icon-pointer-containter {
  height: 44px;
  position: absolute;
  width: 40px;

  .icon-pointer {
    position: absolute;
    right: 8px;
    top: calc(50% - 8px);
    transition: transform 0.3s;
  }

  .icon-pointer-open {
    transform: rotate(90deg);
  }
}

/deep/ .dataset li .ant-tree-switcher {
  display: none;
}

// 数据集外框
/deep/ .ant-tree-child-tree.ant-tree-child-tree-open {
  padding: 0;
}

/deep/ [role='treeitem'] {
  padding: 0 !important;
}

.dataset-title {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 42px;

  div {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  /deep/ .new-input .ant-input {
    margin-left: 0;
    margin-top: 11px;
    padding-right: 20px;
    width: 153px;
  }

  /deep/ .input-clear {
    color: rgba(0, 0, 0, 0.65);
    margin-right: -7px;
    margin-top: 10px;
    z-index: 999;
  }
}

.ellipsis-title {
  display: inline-block;
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 119px;
}

/* 覆盖树形菜单条目后的悬浮下拉框的样式 */
.ant-tree li ul {
  padding: 0 !important;
}

.ant-dropdown-menu {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  width: 61px;
}

li .ant-dropdown-menu-item {
  padding: 8px;
}

ul .ant-tree-child-tree.ant-tree-child-tree-open {
  padding: 0;
}

// 侧边栏 无数据表 样式
.data-empty {
  color: #c6c6c6;
  cursor: default;
  margin-left: -5px;
  padding-left: 45px;
  transition-duration: 0.3s;
  width: 220px;

  &:hover {
    background-color: #fff;
  }
}

// 更多信息的图标
.icon-font {
  padding-top: 15px;
}

.icon-more-options {
  height: 14px;
  margin-top: 16px;
  width: 14px;
}

// 子栏目长度
/deep/ .ant-tree li ul li .ant-tree-node-content-wrapper {
  padding-right: 10px;
}

// 新增/重命名的输入框
/deep/ .new-input .ant-input {
  border-radius: 4px;
  height: 22px;
  margin-left: 41px;
  padding: 0 6px;
  padding-right: 20px;
  width: 154px;
}

// 清除输入框内容的icon
.input-clear {
  color: rgba(0, 0, 0, 0.65);
  margin-right: 7px;
  z-index: 999;
}

ul li .ant-dropdown-menu-item:hover {
  color: @TEXT_HOVER_COLOR;
}

.table-name-enter {
  opacity: 0;
  transform: translateY(-44px);
}

.table-name-enter-active {
  transition: all 0.5s ease;
}

//数据解析入口
.footer {
  border-top: 1px solid #e9e9e9;
  bottom: 16px;
  height: 60px;
  position: absolute;
  text-align: center;
  width: 220px;
}

.footer-button {
  background: #6973ff;
  border-radius: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  letter-spacing: 0.8px;
  line-height: 22px;
  margin-top: 16px;
  width: 172px;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
/deep/ .ant-tree li span[draggable='false'] {
  -webkit-user-drag: none;
}
</style>
